<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	
	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="EmployeeSkill">
			<p:growl id="growl"/>
    		
    	 <h:outputText value="Skill Matrix" styleClass="outputTextTitle" />               
			
         <h:panelGrid>  
          
          <p:panel header="#{msg['employeedetails.label']}"> 
             <h:panelGrid style="width: 100%" cellspacing="9" columns="6" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
	       			
			    <h:outputLabel value="#{msg['employeename.label']}"/>
			    <h:outputLabel value=":" />		
				<h:outputLabel value="#{skillMatrixBean.employeeName}"  readonly="true"/>
				<h:outputLabel value="Employee Code"/>
				<h:outputLabel value=":" />		
				<h:outputLabel value="#{skillMatrixBean.employeeId}"  readonly="true"/>
				 
				<h:outputLabel value="#{msg['designation.label']}"/>
				<h:outputLabel value=":" />		
				<h:outputLabel value="#{skillMatrixBean.designation}" readonly="true" />
				<h:outputLabel value="#{msg['contactnumber.label']}"/>
				<h:outputLabel value=":" />		
				<h:outputLabel value="#{skillMatrixBean.contactNumber}" readonly="true" />				
				
				<h:outputLabel value="Last Updated On" />
				<h:outputLabel value=":" />		
				<h:outputText value="#{skillMatrixBean.employeeSkillMatrix.createDate}" >
					<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a" timeZone="#{skillMatrixBean.timeZone}"/>
				</h:outputText>				
		     </h:panelGrid>
	      </p:panel> 
	      
	      <p:panel header="Experience">  
 			 <h:panelGrid  columns="3" cellspacing="8" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
	       		
	       		<h:outputLabel value="SAP Experience" />	
	       		<h:outputLabel value=":" />		
	       		<p:inputText id="SAPExperience" value="#{skillMatrixBean.employeeSkillMatrix.sapExperience}" size="23"  maxlength="5">
	       			<p:ajax event="change" listener="#{skillMatrixBean.getTotalExperience}"  update="SAPExperience totalExperience growl"/>		
	       		</p:inputText>					 
				
				<h:outputLabel value="SAP End User Experience" />	
				<h:outputLabel  value=":" />					
				<p:inputText id="SAPEndUserExperience" value="#{skillMatrixBean.employeeSkillMatrix.sapEndUserExperience}" size="23" maxlength="5"> 
					 <p:ajax event="change" listener="#{skillMatrixBean.getTotalExperience}" update="SAPEndUserExperience totalExperience growl"/> 
				 </p:inputText>  
				
				<h:outputLabel value="Non-SAP /Domain Experience " />
				<h:outputLabel value=":" />						
				<p:inputText id="NonSAPExperience" value="#{skillMatrixBean.employeeSkillMatrix.nonSAPExperience}" size="23" maxlength="5"> 
					 <p:ajax event="change" listener="#{skillMatrixBean.getTotalExperience}" update="NonSAPExperience totalExperience growl"/>
				 </p:inputText>
				
				<h:outputLabel value="Total Experience" />
				<h:outputLabel value=":" />		
				<p:inputText readonly="true" size="23" value="#{skillMatrixBean.employeeSkillMatrix.totalExperience}" id="totalExperience"/>
				
		     </h:panelGrid>
		  </p:panel> 
		 
		  <p:panel header="Skills"> 
		     <h:panelGrid  columns="3" cellspacing="8" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
		 
	       		<h:outputLabel value="Qualification" />
				<h:outputLabel value=":" />		
				<p:inputText value="#{skillMatrixBean.employeeSkillMatrix.qualification}" />
	       		
	       		<h:outputLabel value="Type "/>
	       		<h:outputLabel value=":" />		
				<p:selectOneMenu value="#{skillMatrixBean.employeeSkillMatrix.sapSkillType}" style="width:160px;">
					<f:selectItem itemLabel="--Choose One--" itemValue="" />
				    <f:selectItem itemLabel="Technical" itemValue="Technical" />  
		            <f:selectItem itemLabel="Functional" itemValue="Functional" />   
		            <f:selectItem itemLabel="Both" itemValue="Both" />
				</p:selectOneMenu>
				
				<h:outputLabel value="Primary Skills "/>
				<h:outputLabel value=":" />		
				<p:inputTextarea style="width:535px;" rows="2" value="#{skillMatrixBean.employeeSkillMatrix.primarySkills}" autoResize="false"/>
				
				<h:outputLabel value="Secondary Skills" />
				<h:outputLabel value=":" />		
				<p:inputTextarea  style="width:535px;" rows="2" value="#{skillMatrixBean.employeeSkillMatrix.secondarySkills}" autoResize="false"/>
				
				<h:outputLabel value="Non-SAP /Domain Skills " />
				<h:outputLabel value=":" />		
				<p:inputTextarea  style="width:535px;" rows="2" value="#{skillMatrixBean.employeeSkillMatrix.nonSAPSkills}" autoResize="false"/>
				
 			 </h:panelGrid>
	      </p:panel>  
	      
	      <p:panel header="Certifications">
 			 <h:panelGrid columns="3" cellspacing="8" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText">
 			
	 			   <h:outputLabel value="Certification Name" />
	               <h:outputLabel value=" : " />
				   <p:inputText id="certificationName" size="23" value="#{skillMatrixBean.sapCertification.certificationName}" title="Certification Name"/>
					
				   <h:outputLabel value="Certofication Version" />
	               <h:outputLabel value=" : " />
				   <p:inputText id="certificationVersion" size="23" value="#{skillMatrixBean.sapCertification.version}" title="Certification Version"/>
							
				   <h:outputLabel value="Description" />
	               <h:outputLabel value=" : " />
				   <p:inputTextarea style="width:535px;" rows="2" id="certificationDescription" title="Description ,If any" value="#{skillMatrixBean.sapCertification.certificationDescription}" autoResize="false"/>
				
				   <h:inputHidden  /><h:inputHidden  />
				   <p:commandButton value="Add" title="Add Certification" action="#{skillMatrixBean.createAnotherCertificationAction}" ajax="false"/>
					
		     </h:panelGrid>			 
			 <p:dataTable value = "#{skillMatrixBean.sapCertifications}" var = "row" binding="#{skillMatrixBean.assignedSAPCertificationsTable}">  
									
					<p:column  headerText="Certification Name" >
					  <p:cellEditor>  						
						<f:facet name="output">  
		                    <h:outputText value="#{row.certificationName}" />
		                </f:facet>  
		                <f:facet name="input">  
		                    <p:inputText value="#{row.certificationName}" style="width:100%"/>  
		                </f:facet>  
					  </p:cellEditor>
					</p:column>					
					<p:column headerText="Version">
						<p:cellEditor>
							<f:facet name="output">  
			                    <h:outputText  value="#{row.version}"/>
			                </f:facet>  
			                <f:facet name="input">  
			                    <p:inputText  value="#{row.version}" style="width:100%"/>  
			                </f:facet>  							
						</p:cellEditor>
					</p:column>
					<p:column headerText="Description">
						<p:cellEditor>							
							<f:facet name="output">  
			                    <h:outputText value="#{row.certificationDescription}" />
			                </f:facet>  
			                <f:facet name="input">  
			                    <p:inputText  value="#{row.certificationDescription}" style="width:100%"/>  
			                </f:facet> 
						</p:cellEditor>
					</p:column>
					<p:column headerText="Edit" style="width:50px">  
			            <p:rowEditor />  
			        </p:column>  
					<p:column headerText="Operation" style="text-align: center; width: 30px;">		
						<p:commandButton icon="ui-icon-close" title="Remove from list"
							actionListener="#{skillMatrixBean.removeCertification}"
							update="@form" style="padding: 0"/>	
					</p:column>
					
		     </p:dataTable>
 		  </p:panel> 	
 			
 		  <p:panel header="Additional Skills">	       		
	         <h:panelGrid columns="3" columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText" cellspacing="8">
	            
	            <h:outputLabel value="Additional Skills" />
	            <h:outputLabel value=":" />
				<p:selectOneMenu id="additionalSkillName" value="#{skillMatrixBean.addtionalSkill.additionalSkill}" title="Additional Skill" style="width:160px;">
					<f:selectItems value="#{skillMatrixBean.additioanlSkillsMap}" />
				</p:selectOneMenu>
					
				<h:outputLabel value="No.of Projects" />
	            <h:outputLabel value=":" />	
				<p:inputText id="NoofProjects" value="#{skillMatrixBean.addtionalSkill.noOfProject}" title="No of Projects"/>
						
				<h:outputLabel value="Skill Description" />
	            <h:outputLabel value=":" />
				<p:inputTextarea style="width:535px;" rows="2" autoResize="false" title="Description ,If any" value="#{skillMatrixBean.addtionalSkill.skillDescription}" />
				
				<h:inputHidden  /><h:inputHidden  />	
				<p:commandButton value="Add" title="Add Skill" actionListener="#{skillMatrixBean.createAnotherSAPSkillsAction}" update="@form" />
		     </h:panelGrid>
				
			 <p:dataTable value = "#{skillMatrixBean.additionalSAPSkills}" var = "additioanlSkill" binding="#{skillMatrixBean.assignedAdditionalSkillsTable}">
									
					<p:column  headerText="Additional Skill" >						
						<p:cellEditor>							
							<f:facet name="output">  
			                   <h:outputText value="#{additioanlSkill.additionalSkill}" />			                  
			                </f:facet>  
			                <f:facet name="input">			                    
			                     <p:selectOneMenu  value="#{additioanlSkill.additionalSkill}" title="Additional Skill" style="width:150px;">
									<f:selectItems value="#{skillMatrixBean.additioanlSkillsMap}" />
							   </p:selectOneMenu>  
			                </f:facet> 
						</p:cellEditor>
					</p:column>					
					<p:column headerText="No of Projects">						
						<p:cellEditor>							
							<f:facet name="output">  
			                   <h:outputText  value="#{additioanlSkill.noOfProject}"/>
			                </f:facet>  
			                <f:facet name="input">  
			                    <p:inputText  value="#{additioanlSkill.noOfProject}" style="width:100%"/>  
			                </f:facet> 
						</p:cellEditor>
					</p:column>
					<p:column headerText="Description">
					  <p:cellEditor>							
							<f:facet name="output">  
			                    <h:outputText value="#{additioanlSkill.skillDescription}" />
			                </f:facet>  
			                <f:facet name="input">  
			                    <p:inputText  value="#{additioanlSkill.skillDescription}" style="width:100%"/>  
			                </f:facet> 
						</p:cellEditor>
						
					</p:column>
					<p:column headerText="Edit" style="width:50px">  
			            <p:rowEditor />  
			        </p:column> 
					<p:column headerText="Operation" style="text-align: center; width: 30px;">					
						<p:commandButton icon="ui-icon-close" title="Remove from list"
							actionListener="#{skillMatrixBean.removeSkill}"
							update="@form" style="padding: 0"/>					
					</p:column>
					
		     </p:dataTable>
 			
		  </p:panel> 
		  
		  
           <h:panelGroup style="float:right;">
		           <p:commandButton type="button" value="Submit" onclick="confirmation.show();" update="@form"/>		          
		           <p:commandButton value="Home" action="wudashboard" /> 
	       </h:panelGroup>	
	       
	       <p:confirmDialog widgetVar="confirmation" id="confirmation" severity="alert" message="This will submit your skill matrix. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now"  action="#{skillMatrixBean.saveSkillMatrixAction}" update="@form" oncomplete="confirmation.hide()"/>
					<p:commandButton id="decline" value="Not Yet" onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
	        </p:confirmDialog>        
	</h:panelGrid>
	       
			
		</h:form>
	</ui:define>
</ui:composition>

